<template>
	<view class="pageBox">
		<loading v-if="loading"></loading>
		<view v-else>
		<!-- 自定义导航栏 -->
		<view class="top-box">
			<view :style="'height:' + statusBarHeight + 'px'"/>
			<view class="navTopBox" :style="'height:' + navBarHeight + 'px;'">
				<view class="left-button-box" :style="'height:' + menuButtonInfo.height + 'px;'">
					<image @click="tapToBack('back')" src="../../static/back.png" mode="aspectFill"></image>
					<view class="line"></view>
					<image src="../../static/detail/home.png" mode="aspectFill" @click="tapToBack('index')"></image>
				</view>
				<view class="right-button-box">
					新人限时特惠
				</view>
			</view>
		</view>
		
		<view class="" :style="'padding-top:' + paddTop + 'px'"></view>
		
		<view class="title">
			<image
				src="https://imgs.ynz666.com/test/2025/01/08/MTI3ODM4OGFkMGVlYTBmNjkzODYzZGUwZjAyMDE0MjM=.png"
				mode="aspectFill" class="bj_img"></image> 
			<view class="title_box" >
				<view class="name">
						<view class="name_text">
							我的积分
						</view>
				</view>
				<view class="points">
					{{mineInfo.integral}}
				<!-- 	<image src="../../static/index/index_rightW.png" mode="aspectFill" class="img"></image> -->
				</view>
				<view class="desc">
					0套路，积分直接当钱花
				</view>
			</view>
		</view>
		
		<!-- 滚动 -->
		<view class="roll">
			<view class="roll_box">
				<!-- <view :style="{animation: `noticeAnimation 7s linear 1s infinite`}"
								id="noticeYd">
							<text class="roll_item" v-for="(item,index) in historyNewList" :key="index">{{item.nickname}}兑换了{{item.name}}</text>
									
				</view> -->
				<swiper :indicator-dots="false" vertical="true" circular='true' :autoplay="true" :interval="3000" :duration="1000"  @change='changeCurrentBanner'>
				 <swiper-item v-for="(item , index) in historyNewList" :key="index">
					<!-- <image src="https://imgs.ynz666.com/2024/9/6/comment/1725592867631.png" mode="aspectFill" class="img"></image> -->
					<view class="fot_rtext">
						{{item.nickname}}刚刚买了{{item.name}}
					</view>
				 </swiper-item>
				</swiper>
			</view>
		</view>
		
		
		<view class="main">
			<view class="main_top">
				<view class="left">
					<view class="name">
						新人专享
					</view>
					<view class="desc">
						限时兑换
					</view>
				</view>
				<view class="right">
					<uni-countdown :show-day="false" :second="timestamp/1000" @timeup="timeOut()" />
				</view>
			</view>
			<view class="main_bot">
				<view class="item" v-for="(item,index) in productList" :key="index" @click="jumpDetil(item.id)">
					<view class="item_box">
						<view class="left">
							<image :src="item.mainImage[0]" mode="aspectFill" class="img"></image>
						</view>
						<view class="right">
							<view class="name">
								{{item.name}}
							</view>
							<view class="desc">
								<text v-for="(itemA,indexA) in item.benefitPoints" :key="indexA">
								 <text class="text_right">{{itemA}}</text>
								 <text class="text_xhx" v-if="indexA!==item.benefitPoints.length-1">|</text>
								</text>
							</view>
							<view class="con">
								<view class="con_poiAll">
									<view class="con_points">
										{{item.newPrice}}积分
									</view>
									<view class="con_price">
										市场价¥{{item.marketPrice}}元
									</view>
								</view>
								<view class="con_btn">
									立即兑换
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 新人弹框 newPerson-->
		<view class="newPersonMask" v-if="newPersonShow">
			<view class="friendModal_box">
				<image src="https://imgs.ynz666.com/test/2025/01/08/OGRiZDVjZGU1M2IzYmZkN2Q1NzU4MWFjOTY3MjFlMWM=.png" mode="aspectFill" class="fri_img"></image>
				<view class="fri_box">
					<image src="https://imgs.ynz666.com/test/2025/01/08/YmIxOWVlOWFiMjgyODlhMTE2ZjE1MzdjODUyNzA2ZTc=.png" mode="aspectFill" class="title_img"></image>
					
					<view class="desc">
						现在兑换，90天内随时到店使用
					</view>
					<view class="per_btn" @click="closeMask">
						留下看看
					</view>
					<view class="per_date" @click="leavePage">
						残忍离开
					</view>
				</view>
				
				<view class="fot">
					<image src="https://imgs.ynz666.com/test/storeInfo/ZTRjZjcwYWY2MWJlMDlmNjIyMTBhMGE5ODc2YWUwOWM=.png" mode="aspectFill" class="img" @click="closeMask"></image>
				</view>
			</view>
		</view>
		
		
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import {
		apiEsStoreList,
	} from '../../apis/index.js';
	import {
		apiOperationProductNewList,apiOperationExchangeHistory
	} from '../../apis/my.js';
	import loading from '../../components/loading/loading.vue';
	
	export default {
		components: {
			loading
		},
		data() {
			return {
				loading:true,
				mineInfo:{},
				productList:[],
				currentBanner:0,
				historyNewList:[],
				currentPage:1,
				pageSize:10,
				isLastPage: false,
				
				newPersonShow:false,
				// 用于存储原始的 navigateBack 方法
				originalBack: null,
				
				
				statusBarHeight: 0,
				windowHeight: 0,
				navBarHeight:0,
				bottomTabbar:0,
				menuButtonInfo:{},
				paddTop:0,
				isModalShowing: false ,// 防止重复弹窗
				timestamp:0,
			}
		},
		onBackPress(){
			// if (!this.data.isModalShowing) {
			//       this.setData({ isModalShowing: true }, () => {
			// 				console.log("调用阻止方法")
			//         wx.showModal({
			//           title: '离开确认',
			//           content: '确定要返回吗？',
			//           success: (res) => {
			//             this.setData({ isModalShowing: false });
			//             if (res.confirm) {
			//               wx.navigateBack(); // 用户确认后手动返回
			//             }
			//           },
			//           fail: () => {
			//             this.setData({ isModalShowing: false });
			//           }
			//         });
			//       });
			//     }
			//     return true;
		},
		onLoad(option){
			let that=this
			
			app.isLogin({},function(login){
				that.getList();
				that.getExchangeHistory();
			})
			if(uni.getStorageSync('newPersonDate')){
				let now=new Date();
				let timestamp=new Date().getTime();
				that.timestamp=uni.getStorageSync('newPersonDate')-timestamp
			}
		},
		onShow(){
			this.getUserInfo();
		},
		mounted() {
			this.noticeX();
		},
		onReachBottom() {
			// if (this.groupTotal!==this.groupList.length) {
			// 	this.par.page++;
			// 	this.getSecKillData();
			// }
			// if (!this.isLastPage) {
			// 	this.currentPage++;
			// 	this.getList();
			
			// } else {
			// 	return
			// }
		},
		onReady() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.navBarHeight =  uni.getMenuButtonBoundingClientRect().height +  ( uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync().statusBarHeight) * 2;
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			this.paddTop=this.statusBarHeight+this.navBarHeight
		},
		onUnload() {
		},
		methods:{
			changeCurrentBanner(i) {
				this.currentBanner = i.detail.current;
			},
			getUserInfo() {
				let that = this;
				app.getUserInfo(function(lRes) {
					that.mineInfo = lRes;
					// that.loading=false
					uni.setStorageSync('mineInfo', lRes);
				})
			},
			jumpDetil(id){
				uni.navigateTo({
					url: `/pageC/pointEquity/pointEquity?new_id=${id}`
				})
			},
			// 返回按钮
			tapToBack(page) {
				// this.newPersonShow=true
				// return ;
				switch(page){
					case 'index':
						uni.switchTab({
							url:'/pages/index/index'
						})
					break;
					case 'back':
						uni.navigateBack({
							delta:1,
							fail() {
								uni.switchTab({
									url:'/pages/index/index'
								})
							}
						})
					break;
				}
			},
			//返回上一个页面
			leavePage() {
			  this.newPersonShow=false
				uni.switchTab({
					url:'../index/index'
				})
			},
			closeMask() {
				this.newPersonShow=false
			},
			// 获取历史兑换信息
			getExchangeHistory(){
				apiOperationExchangeHistory().then(res=>{
					this.historyNewList=res.data.list
					this.loading=false
				})
			},
			// 获取附近商家列表
			getList() {
				var that = this;
				uni.hideLoading();
				// const params = {
				// 	page: that.currentPage,
				// 	pageSize: that.pageSize,
				// 	location: "22.72174,114.06031",
				// 	adCode: "",
				// 	adType:0,
				// 	category:0,
				// 	sort:1,
				// 	business:1,
				// }
				apiOperationProductNewList().then(res => {
					switch (res.code) {
						case 0:
							that.total_page = res.data.total_page;
							that.loading = false;
							that.isLastPage = res.data.is_last_page;
							if (res.data.list.length > 0) {
								that.productList = that.currentPage == 1 ? res.data.list : that.productList
									.concat(res.data.list);
								console.log(that.productList, "商品列表")
								that.loading=false
							}
							break;
						default:
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
							break;
					}
				})
			
			},
			// 倒计时时间到
			timeOut(){
			},
			// 公告
			noticeX() {
				const query = this.createSelectorQuery().in(this);
				query.select('#noticeYd').boundingClientRect(data => {
					// console.log(data,"datadatadata")
					if (data.width - 264 > 0) { //计算文本长度
						this.time = (5 * data.width / 264).toFixed(2) + 1 //动画过渡时间
						// console.log(this.time,"this.time")
					}
				}).exec();
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f9f9f9;
	}
	.top-box {
		position: fixed;
		top: 0;left: 0;
		width: 100vw;
		z-index: 10;
		background: #fff;
	}
	.navTopBox {
		display: flex;
		position: relative;
		align-items: center;
		justify-content: center;
		.left-button-box {
			width: 160rpx;
			background-color: rgba(255,255,255,0.5);
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			// margin-left: 30rpx;
			border: 1rpx solid rgba(224, 224, 224, 0.6);
			position: absolute;
			left: 30rpx;
			.line {
				height: 30rpx;
				background: #CCCCCC;
				width: 1rpx;
			}
			
			image {
				width: 30rpx;
				height: 30rpx;
				margin: 0 20rpx;
			}
		}
		.right-button-box{
			font-size: 28rpx;
			font-weight: bold;
		}
		
	}
.pageBox{
	width: 100%;
	.title{
		margin: 20rpx 24rpx 0;
		position: relative;
		.bj_img{
			width: 100%;
			height: 298rpx;
		}
		.title_box{
			position: absolute;
			top: 0;
			padding: 54rpx 0 0 36rpx;
			.name{
				display: flex;
				align-items: center;
				.img{
					width: 82rpx;
					height: 82rpx;
				}
				.name_text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
			.points{
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 60rpx;
				color: #FFFFFF;
				padding: 20rpx 0 28rpx;
				.img{
					width: 11rpx;
					height: 20rpx;
					margin-left: 20rpx;
				}
			}
			.desc{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				.text_xhx{
					margin: 0 10rpx;
				}
			}
		}
	}
	.roll{
		margin: 24rpx 24rpx 0;
		.roll_box{
			height: 52rpx;
			background: #FBF5EE;
			border-radius: 8rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #DC4D1C;
			display: flex;
			align-items: center;
			swiper {
				width: 100%;
				height: 52rpx;
				swiper-item {
					width: 100%;
					height: 52rpx;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					.img{
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
					}
					.fot_rtext{
						font-size: 22rpx;
						color: #DC4D1C;
						padding-left: 14rpx;
						word-break: break-all;
						white-space: pre-wrap;
						word-wrap: break-word;
						overflow: hidden;
						display: -webkit-box;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						width: 100%;
					}
				}
			}
			// padding: 0 22rpx;
			// overflow: hidden;
			// .roll_item{
			// 	margin-right: 30rpx;
			// }
		}
	}
	
	.main{
		margin: 22rpx 28rpx 0;
		.main_top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				display: flex;
				align-items: center;
				.name{
					font-family: PingFangSC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}
				.desc{
					width: 80rpx;
					height: 26rpx;
					background: #FF5608;
					border-radius: 4rpx;
					margin-left: 14rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 18rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.right{
				font-family: PingFangSC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
		}
		.main_bot{
			width: 100%;
			margin-top: 20rpx;
			.item{
				width: 100%;
				height: 160rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-bottom: 24rpx;
				padding: 24rpx 0;
				.item_box{
					padding: 0 24rpx;
					display: flex;
					.left{
						width: 160rpx;
						height: 160rpx;
						.img{
							width: 160rpx;
							height: 160rpx;
							border-radius: 12rpx;
						}
					}
					.right{
						padding-left: 24rpx;
						flex: 1;
						.name{
							font-family: PingFangSC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							word-break: break-all;
							white-space: pre-wrap;
							word-wrap: break-word;
							overflow: hidden;
							display: -webkit-box;
							text-overflow: ellipsis;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
						}
						.desc{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #B1B1B1;
							padding: 12rpx 0 6rpx;
							word-break: break-all;
							white-space: pre-wrap;
							word-wrap: break-word;
							overflow: hidden;
							display: -webkit-box;
							text-overflow: ellipsis;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							.text_xhx{
								margin: 0 10rpx;
							}
						}
						.con{
							display: flex;
							align-items: center;
							justify-content: space-between;
							.con_poiAll{
								display: flex;
								flex-direction: column;
								.con_points{
									font-family: PingFangSC, PingFang SC;
									font-weight: 500;
									font-size: 28rpx;
									color: #F15A3C;
								}
								.con_price{
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									font-size: 20rpx;
									color: #999999;
								}
							}
							.con_btn{
								width: 160rpx;
								height: 52rpx;
								background: linear-gradient( 143deg, #FB8E2D 0%, #FC5A28 100%);
								box-shadow: 0rpx 4rpx 8rpx 0rpx #FFD7D7;
								border-radius: 26rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								color: #FFFFFF;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
				}
			}
		}
	}
	
}

// 新人用户领取积分弹框
	.newPersonMask{
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
			
		background-color: rgba(0, 0, 0, 0.65);
			
		
		.friendModal_box {
			width: 572rpx;
			height: 752rpx;
			border-radius: 20rpx;
			position: absolute;
			top: 44%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -286rpx;
			.fri_img{
				width: 572rpx;
				height: 752rpx;
			}
			.fri_box{
				width: 572rpx;
				height: 752rpx;
				position: absolute;
				top: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				.title_img{
					width: 440rpx;
					height: 42rpx;
					padding-top: 360rpx;
				}
				.desc{
					margin: 36rpx 0 0;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #A16930;
					text-align: center;
				}
				.per_btn{
					margin-top: 30rpx;
					width: 432rpx;
					height: 84rpx;
					background: linear-gradient( 90deg, #FE3D01 0%, #FF8D16 100%);
					border-radius: 90rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.per_date{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #A16930;
					margin-top: 8rpx;
				}
			}
			
			.fot {
				position: absolute;
				height: 80rpx;
				bottom: -80rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.img{
					width: 54rpx;
					height: 54rpx;
				}
			}
			
			
		}
	}

@keyframes noticeAnimation {
		from {
			transform: translateX(300px)
		}

		to {
			transform: translateX(-100%);
		}
	}
</style>
